<script setup lang="ts">
import { ref, nextTick, onMounted, watch } from 'vue'
import { getGoodsByIdApi } from '@/apis/goods'
import { useRoute, useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import type { GoodDetailType } from '@/apis/components/goodsType'
import ImageView from './components/ImageView.vue'
import { PieChart, ChatLineSquare, Star, Eleme } from '@element-plus/icons-vue'
import GoodsItem from '../Home/components/GoodsItem.vue'
import { useCartListStore } from '@/stores/modules/cartList'
import type { CartListType } from '@/stores/modules/cartList'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const cartListStore = useCartListStore()

// 商品详情
const goodsInfo = ref<GoodDetailType>()

// 获取商品详情
const getGoodsById = async () => {
  const res = await getGoodsByIdApi(route.path.slice(8))
  goodsInfo.value = res.data.result
}
onMounted(async () => {
  await getGoodsById()
  nextTick()
  if (goodsInfo.value?.brand === null) {
    router.replace('/')
    return
  }
})

watch(
  () => route.path,
  () => {
    getGoodsById()
  },
)

// 加入购物车商品数量
const count = ref(1)
// 减少商品数量
const del = () => {
  if (count.value > 1) {
    count.value--
  }
}
// 添加商品数量
const add = () => {
  count.value++
}

const goods = ref<CartListType>()
// 添加购物车
const addCart = () => {
  if (!goodsInfo.value) return

  goods.value = {
    id: goodsInfo.value?.id,
    name: goodsInfo.value?.name,
    picture: goodsInfo.value?.mainPictures[0],
    price: goodsInfo.value?.price,
    count: count.value,
    skuId: goodsInfo.value?.skus[0].id,
    attrsText: goodsInfo.value?.skus[0].specs
      .reduce((p, n) => `${p} ${n.name}：${n.valueName}`, '')
      .trim(),
    selected: true,
  }
  cartListStore.addCart(goods.value)
  ElMessage.success('添加商品成功!')
}
</script>

<template>
  <div class="breadcrumb-box">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/${goodsInfo?.categories[0].parent.id}` }">
        {{ goodsInfo?.categories[0].parent.name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/subcategory/${goodsInfo?.categories[0].id}` }">
        {{ goodsInfo?.categories[0].name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ goodsInfo?.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="goods-detail">
    <div class="left-goods">
      <ImageView :goodsInfo="goodsInfo"></ImageView>
      <div class="left-bottom">
        <ul>
          <li>
            <p class="sales">销售人气</p>
            <p class="count">{{ goodsInfo?.salesCount }}+</p>
            <p class="icon">
              <el-icon color="rgb(11, 250, 242)"><PieChart /></el-icon>销售人气
            </p>
          </li>
          <li>
            <p class="sales">商品评价</p>
            <p class="count">{{ goodsInfo?.commentCount }}+</p>
            <p class="icon">
              <el-icon color="rgb(11, 250, 242)"><ChatLineSquare /></el-icon>查看评价
            </p>
          </li>
          <li>
            <p class="sales">收藏人气</p>
            <p class="count">{{ goodsInfo?.collectCount }}+</p>
            <p class="icon">
              <el-icon color="rgb(11, 250, 242)"><Star /></el-icon>收藏商品
            </p>
          </li>
          <li>
            <p class="sales">品牌信息</p>
            <p class="count">{{ goodsInfo?.brand?.name || '传智品牌' }}+</p>
            <p class="icon">
              <el-icon color="rgb(11, 250, 242)"><Eleme /></el-icon>品牌主页
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="ringht-goods">
      <p class="name">{{ goodsInfo?.name }}</p>
      <p class="desc">{{ goodsInfo?.desc }}</p>
      <div class="price-box">
        <p class="price"><span>￥</span>{{ goodsInfo?.price }}</p>
        <p class="oldPrice">￥{{ goodsInfo?.oldPrice }}</p>
      </div>
      <div class="service">
        <p>
          <span>促销</span>
          <span>12月好物放送, App领券购买直降120元</span>
        </p>
        <p>
          <span>服务</span>
          <span>
            <span>无忧退货</span>
            <span>快速退款</span>
            <span>免费包邮</span>
            <a href="javascript:;">了解详情</a>
          </span>
        </p>
      </div>
      <div class="skus-box">
        <p>款式</p>
        <div class="skus">
          <ul>
            <li v-for="item in goodsInfo?.specs" :key="item.id">
              <div v-for="(value, i) in item.values" :key="i">
                <img :src="value.picture" alt="" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="btn-box">
        <div @click="del">-</div>
        <p>{{ count }}</p>
        <div @click="add">+</div>
      </div>
      <el-button type="success" @click="addCart">加入购物车</el-button>
    </div>
  </div>
  <div class="allPic">
    <div class="left-box">
      <div class="desc-box">
        <p>商品详情</p>
        <div v-for="(item, i) in goodsInfo?.details.properties" :key="i">
          <span class="desc-name">{{ item.name }}</span>
          <span class="desc-value">{{ item.value }}</span>
        </div>
      </div>
      <ul>
        <li v-for="(item, i) in goodsInfo?.details.pictures" :key="i">
          <img :src="item" alt="" />
        </li>
      </ul>
    </div>
    <div class="right-box">
      <div class="hot-box">
        <div class="hot-title">24小时热榜</div>
        <ul>
          <li v-for="item in goodsInfo?.hotByDay" :key="item.id">
            <GoodsItem :goods="item"></GoodsItem>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.breadcrumb-box {
  width: 1100px;
  height: 30px;
  margin-left: 20px;
  .el-breadcrumb {
    font-size: 18px;
  }
}
.goods-detail {
  width: 1100px;
  height: 600px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .left-goods {
    width: 480px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .left-bottom {
      width: 480px;
      height: 200px;
      ul {
        display: flex;
        justify-content: space-evenly;
        margin: 20px auto;
        text-align: center;
        li {
          list-style: none;
          span {
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
          .sales {
            color: rgb(152, 160, 166);
            font-weight: 100;
          }
          .count {
            font-size: 14px;
            color: rgb(250, 11, 11);
          }
        }
      }
    }
  }
  .ringht-goods {
    width: 600px;
    height: 600px;
    .name {
      font-size: 23px;
      font-weight: 400;
    }
    .desc {
      font-size: 13px;
      font-weight: 300;
      color: rgba(191, 191, 185, 0.737);
      margin: 5px 0;
    }
    .price-box {
      width: 140px;
      display: flex;
      justify-content: space-between;
      .price {
        display: flex;
        font-size: 18px;
        color: red;
        p {
          font-size: 13px;
          margin-top: 5px;
        }
      }
      .oldPrice {
        text-decoration: line-through;
        font-size: 13px;
        margin-top: 5px;
        color: rgb(143, 143, 136);
      }
    }
    .service {
      width: 400px;
      height: 80px;
      background-color: rgba(168, 166, 166, 0.098);
      p {
        width: 100%;
        height: 50%;
        line-height: 40px;
        margin-left: 5px;
        font-size: 12px;
        font-weight: 300;
        span {
          margin-left: 10px;
        }
        a {
          margin-left: 10px;
          text-decoration: none;
          color: rgba(2, 167, 112, 0.961);
        }
      }
    }
    .skus-box {
      width: 600px;
      height: 150px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      p {
        width: 50px;
        height: 100%;
        line-height: 150px;
        text-align: center;
        font-size: 15px;
        color: rgb(143, 133, 133);
      }
      .skus {
        width: 550px;
        height: 100%;
        li {
          display: flex;
          justify-content: space-evenly;
          div {
            width: 60px;
            height: 60px;
            margin-top: 5px;
            cursor: pointer;
            img {
              width: 60px;
              height: 60px;
              margin: 5px 5px;
              border: 1px solid rgb(192, 188, 188);
            }
          }
        }
      }
    }
    .btn-box {
      width: 150px;
      height: 30px;
      display: flex;
      border: 1px solid rgba(0, 0, 0, 0.486);
      border-radius: 5px;
      div {
        width: 40px;
        height: 100%;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.053);
        cursor: pointer;
      }
      p {
        width: 70px;
        height: 100%;
        border-left: 1px solid rgba(0, 0, 0, 0.486);
        border-right: 1px solid rgba(0, 0, 0, 0.486);
        text-align: center;
        font-size: 15px;
        line-height: 30px;
      }
    }
    .el-button {
      margin-top: 20px;
    }
  }
}
.allPic {
  width: 1100px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .left-box {
    width: 762px;
    border: 1px solid rgba(0, 0, 0, 0.139);
    padding-top: 10px;
    padding-left: 10px;
    .desc-box {
      p {
        font-size: 25px;
        font-weight: 400;
      }
      div {
        width: 100%;
        height: 50px;
        display: flex;
        line-height: 50px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.432);
        .desc-name {
          width: 20%;
          height: 100%;
        }
        .desc-value {
          width: 80%;
          height: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    li {
      width: 100%;
      height: 200px;
      list-style: none;
    }
  }
  .right-box {
    width: 300px;
    .hot-box {
      width: 100%;
      .hot-title {
        width: 100%;
        height: 60px;
        background-color: coral;
        color: white;
        line-height: 60px;
        padding-left: 10px;
      }
      ul {
        width: 180px;
        margin: 20px auto;
        li {
          width: 100%;
          list-style: none;
        }
      }
    }
  }
}
</style>
